<template>
  <view class="dropdown-menu">
    <!-- 头部菜单栏 -->
    <view class="menu-header">
      <text @click="toggleMenu('sort')" :class="{ active: activeMenu === 'sort' }">
        {{ selectedSort }} ▼
      </text>
      <text @click="toggleMenu('area')" :class="{ active: activeMenu === 'area' }">
        {{ selectedArea }} ▼
      </text>
      <text @click="toggleMenu('price')" :class="{ active: activeMenu === 'price' }">
        {{ selectedPrice }} ▼
      </text>
    </view>

    <!-- 下拉菜单 - 智能排序 -->
    <view class="dropdown-list" :class="{ show: activeMenu === 'sort' }">
      <text v-for="item in sortOptions" :key="item" @click="selectOptionsort(item)">
        {{ item }}
      </text>
    </view>

    <!-- 下拉菜单 - 位置区域 -->
    <view class="dropdown-list" :class="{ show: activeMenu === 'area' }">
      <text v-for="item in areaData" :key="item" @click="selectOptionarea(item)">
        {{ item.name }}
      </text>
    </view>

    <!-- 下拉菜单 - 价格/人数 -->
    <view class="dropdown-list" :class="{ show: activeMenu === 'price' }">
      <text v-for="item in priceOptions" :key="item" @click="selectOptionprice(item)">
        {{ item }}
      </text>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { onMounted} from "vue";
import {commonWordList} from "@/api/system";
const emit = defineEmits(["updatePrice","updateSort","updateArea"]);


const activeMenu = ref(""); // 当前激活的菜单（智能排序、位置区域、价格/人数）
const sortOptions = ["智能排序", "距离最近","价格最高", "价格最低"]; 
const areaData = ref([]) 
const priceOptions = ["全部", "￥0-100", "￥100-300", "￥300-500", "￥500以上"];

const selectedSort = ref("智能排序");
const selectedArea = ref("位置区域");
const selectedPrice = ref("价格筛选");

// 选择选项
const selectOptionsort = (value: string) => {
	console.log(value); 
	  selectedSort.value = value;
	  emit("updateSort", value); 
  activeMenu.value = ""; // 关闭菜单
};
const selectOptionarea = (value: string) => {
	console.log(value);   
	  console.log(value);
	   selectedArea.value = value.name;
	   emit("updateArea", value); 
  activeMenu.value = ""; // 关闭菜单
};
const selectOptionprice = (value: string) => {
	console.log(value); 
	  selectedPrice.value = value;
	  emit("updatePrice", value); 
  activeMenu.value = ""; // 关闭菜单
};

// 切换菜单
const toggleMenu = (menu: string) => {
	console.log(menu);
  activeMenu.value = activeMenu.value === menu ? "" : menu;
};
const queryCommonWordList = async () => {
	await commonWordList({keys:"AREA"}).then(res => { 
		areaData.value = res.result.AREA
	}); 
};    
onMounted(() => {
	queryCommonWordList()
})
</script>

<style scoped>
/* 菜单头部 */
.menu-header {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx; 
  border-bottom: 1rpx solid #ddd;
}

.menu-header text {
  font-size: 28rpx;
  color: #333;
  cursor: pointer;
  border-bottom: 4rpx solid rgba(0, 0, 0, 0);
}

.menu-header text.active {
  color: #C28556;
  border-bottom: 4rpx solid #C28556;
}

/* 下拉列表动画 */
.dropdown-list {
  /* max-height: 0; */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  background: white;
  position: absolute;
  width: 100%;
  box-shadow: 0rpx 2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.dropdown-list.show {
  min-height:300rpx; /* 确保足够高度 */
  opacity: 1;
}

.dropdown-list text {
  display: block;
  padding: 10rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;
}

.dropdown-list text:hover {
  background: #f9f9f9;
}
</style>
